<script setup lang="ts">
import { columns } from '../attribute/columns'
import { useAdminProgramStore } from '../store/adminProgram'
import { storeToRefs } from 'pinia'
import { SearchIcon } from 'tdesign-icons-vue-next'
import { onMounted, ref } from 'vue'
import { post } from '@/utils/api'
import SaveDialog from './SaveDialog.vue'
import DeleteDialog from './DeleteDialog.vue'
import { MessagePlugin } from 'tdesign-vue-next'

const store = useAdminProgramStore()
const {
  tableData,
  tableLoading,
  saveDialogVisible,
  deleteIds,
  imageUploadData,
  downloadUploadData,
  deleteVisible,
  saveMode,
  contentLoading
} = storeToRefs(store)
const { getData, formData } = store

onMounted(async () => {
  await getData()
  contentLoading.value = false
})

const searchData = ref()
const search = async () => {
  if (searchData.value === undefined || searchData.value.trim() === '') {
    await getData()
    return
  }
  tableData.value = []
  tableData.value = await post('/api/program/search', { name: searchData.value.trim() })
}

const refresh = async () => {
  tableData.value = []
  searchData.value = undefined
  await getData()
}

const assignFormData = (row: any) => {
  Object.assign(formData, row)
  formData.cycle = row.cycle.toString()
  formData.price = row.price.toString()
  const { downloadUrl, imageUrl } = row
  imageUploadData.value = [
    {
      name: downloadUrl.slice(downloadUrl.lastIndexOf('/') + 1),
      url: downloadUrl,
      status: 'success'
    }
  ]
  downloadUploadData.value = [
    {
      name: imageUrl.slice(imageUrl.lastIndexOf('/') + 1),
      url: imageUrl,
      status: 'success'
    }
  ]
}

const add = () => {
  saveMode.value = 'add'
  saveDialogVisible.value = true
}

const edit = (row: any) => {
  saveMode.value = 'edit'
  assignFormData(row)
  saveDialogVisible.value = true
}

const singleDelete = (row: any) => {
  deleteVisible.value = true
  deleteIds.value = [row.id]
}
const batchDelete = () => {
  if (deleteIds.value.length === 0) {
    MessagePlugin.closeAll()
    MessagePlugin.warning('删除失败，数据为空！')
    return
  }
  deleteVisible.value = true
}

const selectIdsChange = (ids: any) => {
  deleteIds.value = ids
}
</script>

<template>
  <t-card v-if="!contentLoading" class="card">
    <t-space>
      <t-input v-model="searchData" placeholder="[应用名称]" size="small" @enter="search">
        <template #suffixIcon>
          <search-icon />
        </template>
      </t-input>
      <t-button size="small" theme="primary" @click="search">搜索</t-button>
      <t-button size="small" theme="primary" variant="outline" @click="add"> 添加 </t-button>
      <t-button size="small" theme="primary" variant="outline" @click="batchDelete">
        删除
      </t-button>
      <t-button size="small" theme="primary" variant="outline" @click="refresh"> 刷新 </t-button>
    </t-space>
    <t-divider />
    <t-table
      :columns="columns"
      :data="tableData"
      row-key="id"
      :async-loading="tableLoading"
      hover
      stripe
      empty="暂无应用信息"
      :pagination="{
        defaultCurrent: 1,
        defaultPageSize: 5,
        total: tableData.length
      }"
      :selected-row-keys="deleteIds"
      @select-change="selectIdsChange"
      cellEmptyContent="-"
    >
      <template #status="{ row }">
        <t-link :theme="row.status === 1 ? 'success' : 'danger'">{{
          row.status === 1 ? '正常' : '封禁'
        }}</t-link>
      </template>
      <template #operate="{ row }">
        <div class="operate">
          <t-button class="item" size="small" variant="outline" @click="edit(row)">编辑</t-button>
          <t-button class="item" size="small" variant="outline" @click="singleDelete(row)"
            >删除</t-button
          >
        </div>
      </template>
    </t-table>
  </t-card>

  <SaveDialog />
  <DeleteDialog />
</template>

<style scoped lang="less">
.operate > * {
  margin: 0 5px;
}
.card {
  width: 100%;
  overflow: auto;
}
</style>
